<template>
    <div>
        <baidu-map class="map" center="郑州">
        </baidu-map>
        <van-icon name="arrow-left" @click="todo()" />
         <div class="Whead">
             <h3>已用48小时</h3>
             <p>预计明日到达</p>
             <p>配送员<span>张师傅</span>正在配送</p>
             <div class="btns">
                 <span>取消订单</span>
                 <span>联系配送员</span>
                 <span>催单</span>
             </div>
        </div>
        <div class="message">
            <h2>商品信息</h2>
            <div class="imgs">
                <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
                <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
                <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
            </div>
            <p>商品总价<span>￥79.9</span></p>
            <p>配送费<span>免运费</span></p>
            <p>运费险<span>卖家赠送</span></p>
            <div class="price">
                总计&nbsp;￥
                <span>
                    79.9
                </span>
            </div>
        </div>
        <div class="foot">
            <h3>订单详情</h3>
            <p>订单号<span>17837052369447113441</span></p>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Waitrecriving',
        methods: {
            todo(){
                this.$router.go(-1)
            }
        },
    }
</script>

<style scoped>
    .map{
        width: 100%;
        height: 230px;
    }
    .Whead{
        width: 330px;
        height: 173px;
        position: absolute;
        top: 146px;
        left: 23px;
        background:#fff;
        text-align: center;
        font-size: 12px;
    }
    .Whead h3{
        width: 100px;
        height: 100px;
        display: block;
        border-radius: 50%;
        position: absolute;
        top: -50px;
        left: 115px;
        background: #fff;
        line-height: 100px;
        font-size: #666;
        font-weight: normal

    }
    .Whead p:nth-of-type(1){
        position: absolute;
        top: 46px;
        left: 130px;
    }
     .Whead p:nth-of-type(2){
        position: absolute;
        top: 66px;
        left: 108px;
    }
     .Whead p span{
         margin: 0 5px
     }
     .btns{
         width: 100%;
          position: absolute;
         top: 100px;
         left: 0;
         display: flex;
         justify-content:space-around
     }
     .btns span{
         display: inline-block;
         width: 72px;
         height: 30px;
         border: 1px solid rgb(187, 187, 187);
         border-radius: 82px;
         font-size: 12px;
         line-height: 30px
     }
     .message{
         left: 25px;
        top: 95px;
        width: 328px;
        height: 316px;
        line-height: 20px;
        border-radius: 12px;
        position: relative;
        background: #f2f2f2;
        font-size: 16px;
     }
     .message h2{
         width: 100%;
         height: 62px;
         line-height: 62px;
         font-weight: normal;

     }
     .imgs{
         display: flex;
         justify-content: space-around;

     }
     .imgs img{
         width: 87px;
         height: 87px;
         display: block;
         border-radius: 10px
     }
     .message p{
         height: 40px;
         line-height: 40px;
         width: 277px;
         padding: 0 21px;
         display: flex;
         justify-content: space-between;
         font-size: 14px
     }
     .message p span{
         text-align: end
     }
     .price{
         text-align: end;
         padding: 0 21px
     }
     .foot{
        left: 25px;
        top: 110px;
        width: 8.7rem;
        height: 82px;
        line-height: 20px;
        border-radius: 12px;
        background-color: rgba(242, 242, 242, 1);
        position: relative;
        padding: 17px;
        font-size: 16px;
     }
     .foot h3{
         height: 30px;
     }
     .foot p{
         display: flex;
         justify-content: space-between
     }
     .van-icon{
         position: absolute;
         top: 20px;
         left: 20px;
     } 
</style>